﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人资料</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="html5plus://ready"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>	
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js"></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-nav-bar @click-left="onClickLeft" style="background-color: red;">
					<van-icon slot="left" name="arrow-left" color="white"></van-icon>
					<label slot="title" style="color: white;">个人资料</label>
				</van-nav-bar>
			</header>
			<section>
				<van-cell-group>
					<van-cell is-link value="更换头像" @click="touxiang" style="padding-top: 15px;" center>
						<img :src="img_url" style="width: 55px; height: 55px; overflow:hidden; border-radius: 50%;" slot="title" />
					</van-cell>
				</van-cell-group>
				<van-cell :value="name" title="昵称" is-link @click="changeName">
				</van-cell>
				<van-cell v-bind:value="phone|capitalize" title="手机号码" is-link @click="changePhone">
				</van-cell>
				<van-popup v-model="show" position="top" :overlay="true" :close-on-click-overlay="false">
					<h2 style="text-align: center;">{{changetitle}}</h2>
					<van-cell-group>
						<van-field v-model="value" placeholder="请输入修改后的内容" />
					</van-cell-group>
					<div style="margin-top: 10px;">
						<van-button type="default" class="float_left" @click="cancel">取消</van-button>
						<van-button type="danger" class="float_right" @click="save(changetitle)">保存修改</van-button>
					</div>
				</van-popup>
			</section>
			<van-row>
				<van-col class="com-footer">
					<van-actionsheet v-model="showAlert" :actions="actions" @select="onSelect" @cancel="onCancel" cancel-text="取消"></van-actionsheet>
				</van-col>
			</van-row>
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('capitalize', function (str) {
			console.log(str);
			if(str.length===11){
				let start = str.slice(0, 3)
				let end = str.slice(-4)
				return `${start}****${end}`
			}
		});
		var app = new Vue({
			el: "#app",
			data: {
				img_url: "../img/presonal_wei.jpg", //头像
				name: "", //昵称
				phone: "", //手机号码
				show: false,
				value: "",
				changetitle: "",
				showAlert: false,
				actions: [{
						id: 1,
						name: '拍照'
					},
					{
						id: 2,
						name: '从相册选取'
					}
				]
			},
			created: function() {
				var _this = this;
				var newUser = localStorage.getItem("user"); //从localStorage里取数据(字符串格式)
				newUser = JSON.parse(newUser); //把字符串格式转换成Json格式
				//console.log(newUser);
				if (newUser != null) {
					_this.img_url = newUser.UserData.AvatarImage; //得到用户头像
					_this.name = newUser.UserData.NickName; //得到用户名
					_this.phone=newUser.UserData.Phone;
				}
			},
			methods: {
				touxiang: function() { //更换头像
					this.showAlert = true;
				},
				onClickLeft: function() { //返回个人中心
					plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
				},
				changeName: function() { //修改昵称
					this.show = true;
					this.changetitle = "修改昵称"
					this.value = "";
				},
				changePhone: function() { //修改手机号
					this.show = true;
					this.changetitle = "修改手机号"
					this.value = "";
				},
				cancel: function() { //取消修改
					this.show = false;
				},
				save: function(x) { //保存修改
					var _this = this;
					var newUser = JSON.parse(localStorage.getItem("user"));
					console.log(x)
					if (x == "修改昵称") {
						console.log(x)
						ajax({ //请求修改昵称
							url: "http://dsapi.ysd3g.com/API/ChangeNickName",
							dataType: "jsonp",
							data: {
								key: newUser.Key,
								nickName: _this.value
							},
							success: function(res) {
								console.log(res);
								if (res.Error) {
									_this.$toast(res.Msg)
								} else {
									localStorage.removeItem("user"); //清除缓存
									newUser.UserData.NickName = _this.value
									localStorage.setItem("user", JSON.stringify(newUser));
									console.log(JSON.parse(localStorage.getItem("user")))
									plus.webview.getWebviewById("gerenziliao").reload(true); //重载个人中心
									plus.webview.getWebviewById("presonal").reload(true); //重载个人资料
									_this.$toast("修改成功")
								}

							}
						});
					} else {
						console.log(x)
						console.log(_this.value)
						ajax({ //请求修改手机号
							url: "http://dsapi.ysd3g.com/api/SendChangePhoneCode",
							dataType: "jsonp",
							data: {
								key: newUser.Key,
								phone: _this.value
							},
							success: function(res) {
								console.log(res);
								if (res.Error) {
									_this.$toast(res.Msg)
								} else {
									//localStorage.removeItem("user"); //清除缓存
									newUser.UserData.Phone = _this.value
									localStorage.setItem("user", JSON.stringify(newUser));
									console.log(JSON.parse(localStorage.getItem("user")))
									plus.webview.getWebviewById("presonal").reload(true); //重载个人中心
									plus.webview.getWebviewById("gerenziliao").reload(true); //重载个人资料
									_this.$toast("修改成功")
								}

							}
						});
					}

				},
				onSelect: function(item) { //选择上传头像方式
					console.log(item);
					var _this = this;
					var newUser = JSON.parse(localStorage.getItem("user"));
					if (item.id == 1) { //拍照
						var cmr = plus.camera.getCamera(); //获取相机
						cmr.captureImage(function(p) { //拍照操作成功的回调函数————p：拍照或摄像操作保存的文件路径
							plus.io.resolveLocalFileSystemURL(p, function(entry) { //通过URL参数获取目录对象或文件对象(要操作文件或目录的URL地址，获取操作文件或目录对象成功的回调函数)
								var imgUrl = entry.toLocalURL(); //获取目录路径转换为本地路径URL地址
								app.$dialog.confirm({
									title: '提示',
									message: '您确定上传该图片作为头像吗?'
								}).then(() => {
									app.$toast.loading({
										duration: 0,
										forbidClick: true,
										message: '正在上传'
									});
									var task = plus.uploader.createUpload("http://dsapi.ysd3g.com/api/uploadavatarimage?key=" + newUser.Key +
										"", {
											method: "POST",
											blocksize: 204800,
											priority: 100
										}, //最大上传大小200k,任务优先级100
										function(t, status) { //上传任务完成回调函数——t:上传任务对象——status:上传结果状态码
											//上传成功
											if (status == 200) {
												var responseText = JSON.parse(task.responseText); //转换上传任务完成后服务器返回的数据为JSON格式
												newUser.UserData.AvatarImage = responseText.AvatarImage; //头像上传成功重新赋值
												localStorage.setItem("user", JSON.stringify(newUser));
												plus.webview.getWebviewById("presonal").reload(false);
												plus.webview.currentWebview().reload(false); //true 设置使用缓存，加快读取速度
												app.$toast.success("上传成功");
											} else { //上传失败
												app.$toast.fail("上传失败：" + status);
												app.$toast.clear();
											}
										}
									);
									task.addFile(imgUrl, {
										key: "imgUrl"
									});
									task.start();
									app.showAlert = false;
								}).catch(() => {
									// on cancel
								});
							});
						}, function(e) { //拍照操作失败的回调函数

						}, { //摄像头拍照参数
							index: 1,
							filename: "_doc/camera/"
						}); //选择主摄像头，路径保存到_doc/camera/下
						//plus.io.resolveLocalFileSystemURL( url, succesCB, errorCB );//通过url获取 _doc/camera/下的图片
					} else { //从相册选择
						plus.gallery.pick(function(path) {//从系统相册中选择文件完成后的回调函数
							//成功选择回调 path是图片路径
							app.$dialog.confirm({
								title: '提示',
								message: '您确定上传该图片作为头像吗?'
							}).then(() => {
								app.$toast.loading({
									duration: 0, // 持续展示 toast
									forbidClick: true, // 禁用背景点击
									message: '正在上传'
								});
								//开始上传任务
								var task = plus.uploader.createUpload("http://dsapi.ysd3g.com/api/uploadavatarimage?key=" + newUser.Key +
									"", {
										method: "POST",
										blocksize: 204800,
										priority: 100
									}, //最大上传大小200k,任务优先级100
									function(t, status) {
										//上传成功
										if (status == 200) {
											var responseText = JSON.parse(task.responseText); //转换上传任务完成后服务器返回的数据为JSON格式
											newUser.UserData.AvatarImage = responseText.AvatarImage; //头像上传成功重新赋值
											localStorage.setItem("user", JSON.stringify(newUser));
											plus.webview.getWebviewById("presonal").reload(false);
											plus.webview.currentWebview().reload(false); //true 设置使用缓存，加快读取速度
											app.$toast.success("上传成功");
										} else { //上传失败
											app.$toast.fail("上传失败：" + status);
											app.$toast.clear();
										}
									}
								);
								task.addFile(path, {
									key: "imgUrl"
								});
								task.start();
								app.showAlert = false;
							}).catch(() => {
								// on cancel
							});
						}, function(e) {//从系统相册中选择文件操作错误的回调函数
							var code = e.code; // 错误编码
							var message = e.message; // 错误描述信息
							app.$toast.fail(message);
						}, {
							filter: "image"
						}); //filter 默认过滤其他文件，只剩图片
					}

				},
				onCancel: function() {
					app.$toast("取消");
				}
			}
		})
	</script>
</html>